![Snykでコード品質をチェックする](https://devio2023-media.developers.io/wp-content/uploads/2021/12/eyecatch_Synk_1200x630.png)
Snykでコード品質をチェックする
こんにちは、新規事業統括部 Profllyチームのおーしろです。
Snykには現在 Snyk Open Source
Snyk Code
Snyk Container
Snyk IaC
Snyk Cloud
などのプロダクトがあり主にセキュリティに関する診断をすることが出来ますが、IDEでSnykのプラグイン(Snyk Code Checker)を利用するとコードの品質をチェックすることが出来ます。
Snyk Code Checkerとは
IDEのプラグインとして利用でき、アプリケーションコードをスキャンし品質とセキュリティの問題点検出するためのツールです。開発者はコーディング中に直接その場でコードを修正することで品質とセキュリティの高いコーディングができるというサービスです。
開発者はコーディング中に直接その場でコードを修正できる
という点はSnyk Code Checkerの特徴の1つです。
プラグインのインストール
※事前にSnykのアカウント作成と、利用中のOSや環境に合わせてSnyk CLI
をインストールして置く必要があります。
(Snyk CLI インストール公式手順)
今回はVSCodeへのインストールを行いますが、IntelliJなど様々なIDEに対応しているようです。
Snyk Web UI の Integration
> IDE plugins
から利用しているIDEを選択(本記事ではVisual Studio Codeを選択)。
別ウィンドウが開くのでInstall
をクリック。
先ほど選択したIDEのプラグインインストール画面が表示されるのでインストール
をクリック。
Snykへのログインが必要なためConnect VS Code with Snyk
をクリック。
ブラウザで認証画面が表示されるためAuthenticate
をクリック。
認証に成功するとSnykのプラグインで自動的にスキャンが実行されます。
コード品質について提案されている箇所の確認方法
デフォルト設定ではコーディング中にファイルを保存すると自動的にスキャンが実行され、画像のように波線と電球アイコンでコード品質についての提案が表示されます。
電球アイコンからshow this suggestion(Snyk)
をクリックすると新しいタブで修正方法などの詳細情報が表示されます。
また、Snykのプラグインメニューから提案の箇所を特定することも出来ます。
このときコード品質に関しての提案はCODE QUALITY
のタブで確認します。
修正する
提案には下記のように記載せれています。
Using isNaN [:86] may lead to unexpected results. Consider the more robust Number.isNaN instead. [日本語訳] isNaNを使用すると、予期しない結果になることがあります。 代わりにより堅牢なNumber.isNaNを検討してください。
また、[More info]をクリックすると提案内容のより詳細な内容が記載せれたサイトに遷移し、isNaNを利用したときの実例などが記載されています。
提案内容にはコードの例も記載されているのでそれを参考に修正し、保存をするとスキャンが再度実行されます。 スキャン後は提案が消えることが確認できました。
留意点
IDEにSnykのプラグインをインストールするとIDEで開いているディレクトリに.dccache
といファイルが自動的に作成されます。
これはSnykのプラグインがスキャン時にのパフォーマンスを向上させる(スキャンスピードを上げる)ためのファイルで、推奨の対応としては削除せずに.gitignore
にてGit管理の対象外にするなどの対応が必要とのことです。
ちなみに削除してもVSCodeでディレクトリを再読込すると自動的に作成されます。
おわりに
Snykでコード品質を向上させる流れを紹介しました。
Snykはセキュリティ以外にもコード品質を向上させるためのツールとしても利用する事ができました。 Code Qualityを利用することで開発初期段階(コーディングの段階)でコード品質を向上させ、コードレビューの負担軽減やサービス品質向上にも繋がるのではないでしょうか。